<template>
	<div id="onlineservice">
		<div id="J_lightDemoWrap" style="width: 100%;height: 79vh;right:0;bottom:0;"></div>
	</div>
</template>

<script>
	import $ from 'jquery';

	//	import WKIT from './alikit.js';
	//	import wsdk from './wsdk.js';
	import service from '@/js/services/onlineservice.js';
	export default {
		data() {
			return {
				contacts: [],
				uid: '',
				credential: '',
				appkey: '',
				count: 0,
				wkit: null
			}
		},
		created() {
			let self = this;
			console.log(self.$store.state.wkit);
			if(self.$store.state.wkit && self.$store.state.wkit.init) {
				this.wkit = this.$store.state.wkit;
			}
			if(!this.wkit) {
				service.initWKIT(self).then(() => { //初始化页面
					self.$store.commit('changeValue', {
						name: 'wkit',
						value: WKIT
					});
					debugger
					console.log(self.$store.state.wkit);
					self.wkit = WKIT;

					self.init();
				});
			} else {
				self.init();
			}

		},
		destroyed() {
			var demo = document.getElementById('J_lightDemoWrap');
			demo.parentNode.removeChild(demo);
		},
		methods: {
			init() {
				let self = this;
				let wkit = self.wkit;
				let pluginUrl = window.location.href.split('#')[0];
				pluginUrl = pluginUrl + "#/contacts";
				service.getmyaliAccount(this, function(res) { //获取阿里账号
					let data = res.data;
					self.uid = data.ali.account;
					self.credential = data.ali.password;
					self.appkey = data.appKey;

					wkit.init({
						container: document.getElementById('J_lightDemoWrap'),
						logo: 'https://gw.alicdn.com/tps/TB10C4vKXXXXXa_aXXXXXXXXXXX-420-420.jpg_200x200.jpg',
						avatar: 'https://gw.alicdn.com/tps/TB10C4vKXXXXXa_aXXXXXXXXXXX-420-420.jpg_200x200.jpg',
						toAvatar: 'https://gw.alicdn.com/tps/TB10C4vKXXXXXa_aXXXXXXXXXXX-420-420.jpg_200x200.jpg',
						uid: self.uid,
						appkey: self.appkey,
						credential: self.credential,
						touid: 'test',
						theme: 'orange',
						pluginUrl: pluginUrl,
						sendBtn: true,
						logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',
						onLoginSuccess: function(res) {
							if(self.count == 0) {
								self.count = 1;
								let sdk = wkit.Conn.sdk;
								self.getContactList(sdk);
								self.onListening(sdk);
							}
						},
						onLoginError: function(res) {
							if(res.code == 1008) {
//								self.init();
							}
						}
					});
				});
			},
			onListening(sdk) {
				let self = this;
				sdk.Event.on('MSG_RECEIVED', function(data) {
					let isNewContact = true;
					let msg = data.data.msgs[0];
					for(let item of self.contacts) {
						if(item.fromid = msg.from) {
							item.msgCount = item.msgCount + 1;
							item.seqno = 0;
							isNewContact = false;
							break;
						}
					}
					if(isNewContact) {
						let newContact = {};
						newContact.fromid = msg.from;
						newContact.from = sdk.Base.getNick(msg.from);
						newContact.time = msg.time;
						newContact.msgCount = 1;
						newContact.seqno = 0;
						self.contacts.splice(0, 0, newContact);
					}
					self.initContactList();
				});
				sdk.Base.startListenAllMsg();
			},
			getContactList(sdk) {
				let self = this;
				sdk.Base.getRecentContact({
					count: 30,
					success: function(res) {
						if(res.code === 1000) {
							if(self.count < 2) {
								self.count = 2;
								let data = res.data.cnts;
								let index = 0;
								let contacts = [];
								for(let item of data) {
									index++;
									let contact = {};
									contact.from = sdk.Base.getNick(item.uid);
									contact.fromid = item.uid;
									contact.time = item.time;
									contact.msgCount = 0;
									contact.seqno = index;
									contacts.push(contact);
								}
								self.contacts = contacts;

								self.getUnreadMsgCount(sdk);
							}
						}
					},
					error: function(error) {
						console.log("error", error);
						self.$message('获取联系人列表失败！');
					}
				});
			},
			getUnreadMsgCount(sdk) {
				let self = this;
				sdk.Base.getUnreadMsgCount({
					count: 30,
					success: function(res) {
						if(res.code === 1000) {
							let data = res.data;
							if(data) {
								for(let item of data) {
									self.mergeContact(self, item, sdk);
								}
							}
							self.initContactList();
						}
					},
					error: function(error) {
						self.$message('消息获取失败,请刷新重试！');
					}
				});
			},
			mergeContact(self, contact, sdk) {
				let isNewContact = true;
				for(let i = 0; i < self.contacts.length; i++) {
					if(self.contacts[i].fromid == contact.contact) {
						self.contacts[i].msgCount = self.contacts[i].msgCount + contact.msgCount;
						self.contacts[i].seqno = 0;
						isNewContact = false;
						break;
					}
				}
				if(isNewContact) {
					let newContact = {};
					newContact.fromid = contact.contact;
					newContact.from = sdk.Base.getNick(contact.contact);
					newContact.time = contact.lastmsgTime;
					newContact.msgCount = contact.msgCount;
					newContact.seqno = 0;
					this.contacts.splice(0, 0, newContact);
				}
			},
			initContactList() {
				this.contacts = this.contacts.sort(function(a, b) {
					return a.seqno - b.seqno
				});
				let obj = document.getElementById('J_wkitPluginFrame').contentWindow;
				let contactlist = obj.document.getElementById("contactlist");
				$(contactlist).empty();
				for(let item of this.contacts) {
					let itemHtml = '<div class="contacts-item" id="' + item.from + '"><div class="img"><img src="static/img/img.jpg" /></div>';
					itemHtml += '<div class="name">' + item.from + '</div>';
					if(item.msgCount > 0) {
						itemHtml += '<div class="right"><div class="count">' + item.msgCount + '</div></div>';
					}

					$(contactlist).append(itemHtml);
				}

				$(contactlist).find(".contacts-item").click(function() {
					let uid = $(this).attr("id");
					//$(this).sliblings().removeClass("contact-active");
					//$(this).addClass("contact-active");
					$(this).find(".right").remove();
					WKIT.switchTouid({
						touid: uid
					});
					$("#J_wkitChatWrap").find(".wkit-avatar").attr("src", "https://gw.alicdn.com/tps/TB10C4vKXXXXXa_aXXXXXXXXXXX-420-420.jpg_200x200.jpg")
				});
			}
		}
	}
</script>
<style lang="less">
	#J_wkitPluginWrap {
		width: 210px !important;
	}
	
	#J_wkitUserInfo,
	#J_wkitPluginFrameWrap,
	#J_wkitPluginFrame {
		width: 205px !important;
	}
	
	#J_wkitChatWrap {
		width: 78% !important;
	}
	
	#J_wkitMsgInputWrap,
	#J_wkitMsgContent {
		width: 99% !important;
	}
	
	#J_wkitMsgInput,
	#J_wkitTextarea,
	#J_wkitSoftInput {
		width: 100% !important;
	}
</style>